<template>
  <div class="mod-config">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClickTab">
      <el-tab-pane label="推荐临摹碑帖" name="1">
        <el-button type="primary" @click="openUnifyDialog('推荐临摹碑帖')">添加推荐临摹碑帖集合</el-button>
        <el-button type="danger" v-show="showMoveBtn" @click="multipledeleteHandle">批量删除集合</el-button>
        <el-button type="danger" v-show="showMoveBtn_beitie" @click="multipdeletebeitieHandle">批量删除碑帖</el-button>
        <el-table :data="dataList" stripe v-loading="dataListLoading" style="width: 100%"
          @selection-change="handleSelectionChange" @expand-change="expandSelect" :row-key='getRowKeys' :expand-row-keys="expands">
          <el-table-column prop="" type="selection" />

          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table label-position="left" :data="props.row.recommendSteleCalligraphyList" inline
                class="demo-table-expand" @selection-change="handlebeitie1SelectionChange" >
                <el-table-column prop="" type="selection" />
                <el-table-column label="碑帖id" prop="id"></el-table-column>
                <el-table-column label="碑帖名称" prop="steleCalligraphyName"></el-table-column>
                <el-table-column label="碑帖封面" align="center">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.steleCalligraphyThumbnail" lazy>
                      <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="calligraphyIntroduction" label="碑帖简介" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="calligrapherIntroduction" label="书家介绍" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="sorder" label="顺序" show-overflow-tooltip> </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" slot="reference" size="small"
                      @click="modifybeitie(scope.row)">修改碑帖顺序</el-button>
                    <el-button type="text" size="small" @click="deletebeitieHandle(scope.row)">删除碑帖</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>

          <el-table-column prop="id" label="碑帖id" show-overflow-tooltip></el-table-column>
          <el-table-column prop="steleCalligraphyConame" label="碑帖名称"> </el-table-column>
          <el-table-column prop="createtime" label="创建时间"> </el-table-column>
          <el-table-column prop="rorder" label="顺序"> </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openbeitieUnifyDialog(scope.row)">添加碑帖</el-button>
              </el-button>
              <el-button type="text" size="small" @click="modifyHanle(scope.row)">修改碑帖集合</el-button>
              </el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除碑帖集合</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-tab-pane>
      <el-tab-pane label="推荐欣赏碑帖" name="2">
        <el-button type="primary" @click="openUnifyDialog('推荐欣赏碑帖')">添加推荐欣赏碑帖集合</el-button>
        <el-button type="danger" v-show="showMoveBtn" @click="multipledeleteHandle">批量删除</el-button>
        <el-table :data="dataList" stripe v-loading="dataListLoading" style="width: 100%"
          @selection-change="handleSelectionChange" @expand-change="expandSelect" :row-key='getRowKeys' :expand-row-keys="expands">
          <el-table-column prop="" type="selection" />
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table label-position="left" :data="props.row.recommendSteleCalligraphyList" inline
                class="demo-table-expand" @selection-change="handlebeitie1SelectionChange">
                <el-table-column prop="" type="selection" />
                <el-table-column label="碑帖集合id" prop="id"></el-table-column>
                <el-table-column label="碑帖名称" prop="steleCalligraphyName"></el-table-column>
                <el-table-column label="碑帖封面" align="center">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.steleCalligraphyThumbnail"  lazy>
                      <div slot="placeholder" class="image-slot">
                        <i class="el-icon-loading"></i>加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="calligraphyIntroduction" label="碑帖简介" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="calligrapherIntroduction" label="书家介绍" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="sorder" label="顺序" show-overflow-tooltip> </el-table-column>

                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" slot="reference" size="small"
                      @click="modifybeitie(scope.row)">修改碑帖顺序</el-button>
                    <el-button type="text" size="small" @click="deletebeitieHandle(scope.row)">删除碑帖</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="碑帖集合id" show-overflow-tooltip></el-table-column>
          <el-table-column prop="steleCalligraphyConame" label="碑帖名称"> </el-table-column>
          <el-table-column prop="createtime" label="创建时间"> </el-table-column>
          <el-table-column prop="rorder" label="顺序"> </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openbeitieUnifyDialog(scope.row)">添加碑帖</el-button>
              </el-button>
              <el-button type="text" size="small" @click="modifyHanle(scope.row)">修改碑帖集合</el-button>
              </el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除碑帖集合</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页条 -->
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增字体、书法、模态框 -->
    <el-dialog :title=isStatusName :visible.sync="dialogUnifyVisible" width="600px" destroy-on-close>
      <el-form ref="unifyForm" :model="DataForm" @keyup.enter.native="dataFormSubmit()" label-width="100px"
        :rules="rules">
        <el-form-item label="碑帖集合名称" prop="name">
          <el-input v-model="DataForm.steleCalligraphyConame"></el-input>
        </el-form-item>
        <el-form-item label="顺序" prop="mobile">
          <el-input-number v-model="DataForm.rorder" :min="1" :max="100" :precision="0" label="描述文字">
          </el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd()">取 消</el-button>
        <el-button type="primary" @click="doAdd()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增碑帖 -->
    <el-dialog :title=isStatusName :visible.sync="dialogbeitieUnifyVisible" width="120vh" destroy-on-close>
      <el-form ref="form" :inline="true" label-width="80px">
        <el-form-item width="400px">
          <el-input placeholder="输入名称搜索相关内容" v-model="condition" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="yearsValue" placeholder="请选择年代" clearable>
            <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="styleValue" placeholder="请选择书体" clearable>
            <el-option v-for="item in styleOptions" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="calligrapherValue" placeholder="请选择书家" clearable>
            <el-option v-for="item in calligrapherOptions" :key="item.value" :label="item.label" :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-table :data="beitieDataForm" stripe v-loading="dataListLoading"
        style="width: 100%;height:450px;overflow-y: scroll;" @selection-change="handlebeitieSelectionChange">
        <el-table-column prop="" type="selection" />
        <el-table-column prop="steleCalligraphyName" width="160" label="碑帖名称"></el-table-column>
        <el-table-column prop="steleCalligraphyThumbnail" width="150" label="碑帖封面">
          <template slot-scope="scope">
            <i v-show="isLoading" class="el-icon-loading"></i>
            <el-image v-show="!isLoading" :src="scope.row.steleCalligraphyThumbnail" @load="handleImgLoad()">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="calligraphyIntroduction" label="碑帖简介" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="calligrapherIntroduction" label="书家介绍" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="sorder" label="顺序" show-overflow-tooltip> </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <el-pagination @size-change="sizebeitieChangeHandle" @current-change="currentbeitieChangeHandle"
        :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="beitietotalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelbeitieAdd()">取 消</el-button>
        <el-button type="primary" @click="doSelectAdd()">选中添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 字体
        activeName: '1',
        tabPosition: 'left',
        tab: 1,
        dataList: null,
        dialogUnifyVisible: false,
        dialogbeitieUnifyVisible: false,
        DataForm: {
          id: null,
          name: '',
          steleCalligraphyConame: '',
          rtype: '',
          rorder: 1
        },
        beitieDataForm: [],
        condition: '',
        yearsValue: null,
        styleValue: null,
        calligrapherValue: null,
        yearsOptions: null,
        styleOptions: null,
        calligrapherOptions:null,
        isAdd: true,
        pageIndex: 1,
        pageSize: 10,
        pageIndex_beitie: 1,
        pageSize_beitie: 10,
        totalPage: 0,
        beitietotalPage: 0,
        showMoveBtn: false,
        showMoveBtn_beitie: false,
        dataListLoading: false,
        nowId: '',
        multipleSelection_beitie: [],
        multipleSelection_zibeitie: [],
        expands: [], //只展开一行放入当前行id
        getRowKeys(row) { //设置row-key只展示一行
          return row.id
        },
        rules: {
          steleCalligraphyConame: [{
            required: true,
            message: '请输入内容',
            trigger: 'change'
          }, {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'change'
          }]
        },
      };
    },
    components: {},
    created() {
      this.getDataListById()
    },
    watch: {
      // 当tab切换时，改变
      tab: {
        handler(newValue, OldValue) {
          this.multipleSelection = []
          this.multipleSelection_beitie = []
          this.multipleSelection_zibeitie = []
        }
      },
      yearsValue: {
        handler(newValue, OldValue) {
          if (this.dialogbeitieUnifyVisible) this.getRubbingDataList()
          this.pageIndex_beitie = 1
        }
      },
      styleValue: {
        handler(newValue, OldValue) {
          if (this.dialogbeitieUnifyVisible) this.getRubbingDataList()
          this.pageIndex_beitie = 1
        }
      },
      calligrapherValue: {
        handler(newValue, OldValue) {
          if (this.dialogbeitieUnifyVisible) this.getRubbingDataList()
          this.pageIndex_beitie = 1
        }
      },
      condition: {
        handler(newValue, OldValue) {
          if (this.dialogbeitieUnifyVisible) this.getRubbingDataList()
          this.pageIndex_beitie = 1
        }
      },
    },
    computed: {
      isStatusName: function() {
        if (this.isAdd) {
          return '新增'
        } else {
          return '修改'
        }
      }
    },
    methods: {
      // 点击切换选项卡
      handleClickTab(tab, event) {
        this.tab = tab.name
        this.pageIndex = 1
        this.getDataListById()
      },
      // 根据选项卡id获取列表
      getDataListById() {

        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/restelecallicollection/page"),
          method: "post",
          params: this.$http.adornParams({
            rtype: this.tab,
            curPage: this.pageIndex,
            pageSize: this.pageSize,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.dataList = data.data.record;
            this.totalPage = data.data.total;
          } else {
            this.dataList = [];
            this.totalPage = 0;
          }
          this.dataListLoading = false;
        });
      },
      // 获取碑帖列表
      getRubbingDataList() {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/stelecalligraphy/list"),
          method: "get",
          params: this.$http.adornParams({
            condition: this.condition,
            years: this.yearsValue,
            style: this.styleValue,
            calligrapher: this.calligrapherValue,
            curPage: this.pageIndex_beitie,
            pageSize: this.pageSize_beitie,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            this.beitieDataForm = data.data.record;
            this.beitietotalPage = data.data.total;
          } else {
            this.$message.error(data.message);
            this.beitieDataForm = [];
            this.beitietotalPage = 0;
          }
          this.dataListLoading = false;
          this.multipleSelection_beitie = []
          this.multipleSelection_zibeitie = []
        });
      },
      // 新增 -- 打开碑帖集合框
      openUnifyDialog() {
        this.dialogUnifyVisible = true
        this.isAdd = true
        this.DataForm = {
          id: null,
          steleCalligraphyConame: '',
          rtype: this.tab,
          rorder: 1
        }
      },
      // 碑帖集合框--取消按钮
      cancelAdd() {
        this.dialogUnifyVisible = false
        this.DataForm = {
          id: null,
          steleCalligraphyConame: '',
          rtype: this.tab,
          rorder: 1
        }
      },
      // 新增 -- 打开碑帖框
      openbeitieUnifyDialog(row) {
        this.dialogbeitieUnifyVisible = true
        this.getRubbingDataList()
        this.getbeitieDataListById(1)
        this.getbeitieDataListById(2)
        this.getbeitieDataListById(3)
        this.isAdd = true
        this.nowId = row.id
        this.DataForm = {
          id: null,
          steleCalligraphyConame: '',
          rtype: this.tab,
          rorder: 1
        }
      },
      // 根据id获取书体 书家 年代列表
      getbeitieDataListById(type) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/ysc/get"),
          method: "get",
          params: this.$http.adornParams({
            type: type,
          })
        }).then(({
          data
        }) => {
          if (data && data.code === 0) {
            switch (type) {
              case 1:
                this.yearsOptions = data.data.map((item) => {
                  return {
                    value: item.id,
                    label: item.years
                  }
                })
                break;
              case 2:
                this.styleOptions = data.data.map((item) => {
                  return {
                    value: item.id,
                    label: item.style
                  }
                })
                break;
              case 3:
                this.calligrapherOptions = data.data.map((item) => {
                  return {
                    value: item.id,
                    label: item.name
                  }
                })
                break;
            }

          } else {
            this.$message.error(data.message);
            this.yearsOptions = []
          }
          this.dataListLoading = false;
        });
      },
      // 碑帖框--取消按钮
      cancelbeitieAdd() {
        this.dialogbeitieUnifyVisible = false
        this.DataForm = {
          id: null,
          steleCalligraphyConame: '',
          rtype: this.tab,
          rorder: 1
        }
        this.condition = ''
        this.yearsValue = null
        this.styleValue = null
        this.calligrapherValue = null
        this.yearsOptions = null
        this.styleOptions = null
        this.calligrapherOptions=null
      },
      // 碑帖集合框--确定按钮
      doAdd() {
        this.$refs['unifyForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(
                `/sf/copyingSteleCalligraphy/restelecallicollection/${this.isAdd?'save':'update'}`),
              method: "post",
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: this.$http.adornData(this.DataForm, true, 'form')
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: `${this.isAdd?'新增成功':'更新成功'}`,
                  type: "success",
                  duration: 1000,
                  onClose: () => {
                    this.dialogUnifyVisible = false
                    this.getDataListById()
                  },
                });
              } else {
                this.$message.error(data.message);
              }
            });
          } else {
            this.dataListLoading = false
            console.log('error submit!!')
            return false
          }
        })


      },
      // 选中添加进碑帖集合
      doSelectAdd() {
        const ids = []
        this.multipleSelection_beitie.forEach(item => {
          ids.push(item.id)
        })
        this.$http({
          url: this.$http.adornUrl(
            `/sf/copyingSteleCalligraphy/restelecalligraphy/${this.isAdd?'save':'update'}`),
          method: "post",

          data: this.$http.adornData({
            rid: this.nowId,
            sidList: ids
          }, false),
        }).then(({
          data
        }) => {
          if (data && data.code === 0 && data.success) {
            this.$message({
              message: `${this.isAdd?'新增成功':'更新成功'}`,
              type: "success",
              duration: 1000,
              onClose: () => {
                this.dialogbeitieUnifyVisible = false
                this.getDataListById()
              },
            });
          } else {
            this.$message.error(data.message);
          }
        });
      },
      // 修改--碑帖集合打开框
      modifyHanle(row) {
        this.dialogUnifyVisible = true
        this.isAdd = false
        this.DataForm = {
          id: row.id,
          steleCalligraphyConame: row.steleCalligraphyConame,
          rtype: this.tab,
          rorder: row.rorder,
        }
      },
      // 修改碑帖
      modifybeitie(row) {
        this.$prompt('请输入要修改的顺序', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\d+$/,
          inputErrorMessage: '输入格式不正确'
        }).then(({
          value
        }) => {
          this.$http({
            url: this.$http.adornUrl(
              '/sf/copyingSteleCalligraphy/restelecalligraphy/update'),
            method: "post",
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            data: this.$http.adornData({
              id: row.id,
              sorder: value
            }, true, 'form')
          }).then(({
            data
          }) => {
            if (data && data.code === 0 && data.success) {
              this.$message({
                message: '修改成功',
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.dialogUnifyVisible = false
                  this.getDataListById()
                },
              });
            } else {
              this.$message.error(data.message);
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val;
        this.pageIndex = 1;
        this.getDataListById()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageIndex = val;
        this.getDataListById()
      },

      // beitie每页数
      sizebeitieChangeHandle(val) {
        this.pageSize_beitie = val;
        this.pageIndex_beitie = 1;
        this.getRubbingDataList()
      },
      // beitie当前页
      currentbeitieChangeHandle(val) {
        this.pageIndex_beitie = val;
        this.getRubbingDataList()
      },
      // 展开行变化时触发
      expandSelect(row, expandedRows) {
        //加载前先将上次的数据模型情况，不然会出现点击展开嵌套表格后，先显示上一次的数据，然后渲染这次的数据。
        this.observe = [];
        //只展开一行
        if (expandedRows.length) { //说明展开了
          this.expands = [];
          if (row) {
            this.expands.push(row.id); //只展开当前行id
          }
        } else { //说明收起了
          this.expands = [];
        }
      },
      // 删除碑帖集合
      deleteHandle(row) {
        this.$confirm(`确定对id[${row.id}]进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/restelecallicollection/delete"),
              method: "post",
              data: this.$http.adornData([row.id], false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getDataListById()
                  },
                });
              } else {
                this.dataListLoading = false
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // 删除多个文件 碑帖集合
      multipledeleteHandle() {
        const ids = []
        this.multipleSelection.forEach(item => {
          ids.push(item.id)
        })
        this.$confirm(`确定对这些进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/restelecallicollection/delete"),
              method: "post",
              data: this.$http.adornData(ids, false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getDataListById()
                  },
                });
              } else {
                this.getDataListById()
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },


      // 删除碑帖
      deletebeitieHandle(row) {
        this.$confirm(`确定对id[${row.id}]进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.dataListLoading = true
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/restelecalligraphy/delete"),
              method: "post",
              data: this.$http.adornData([row.id], false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getDataListById()
                  },
                });
              } else {
                this.dataListLoading = false
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },
      // 删除多个文件 碑帖
      multipdeletebeitieHandle() {
        const ids = []
        this.multipleSelection_zibeitie.forEach(item => {
          ids.push(item.id)
        })
        this.$confirm(`确定对这些进行[删除]操作?`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/sf/copyingSteleCalligraphy/restelecalligraphy/delete"),
              method: "post",
              data: this.$http.adornData(ids, false),
            }).then(({
              data
            }) => {
              if (data && data.code === 0 && data.success) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getDataListById()
                  },
                });
              } else {
                this.getDataListById()
                this.$message.error(data.message);
              }
            });
          })
          .catch(() => {});
      },

      // 点击多选框事件
      handleSelectionChange(val) {
        this.showMoveBtn = val.length != 0
        this.multipleSelection = val
      },
      // 点击弹框中的多选框
      handlebeitieSelectionChange(val) {
        this.multipleSelection_beitie = val
      },
      // 点击表格子表格的多选框事件
      handlebeitie1SelectionChange(val) {
        this.showMoveBtn_beitie = val.length != 0
        this.multipleSelection_zibeitie = val
      },
    },
  };
</script>
<style lang="less" scoped>
  .filename-span {
    vertical-align: middle;
    margin: 0 2px;
  }

  .isDir {
    cursor: pointer;
    line-height: 30px;

    &:hover {
      text-decoration: underline;
    }
  }

  .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    width: 100%;

    .spanDir {
      width: 100%;
      color: #06a7ff;
    }
  }

  .spanDir {
    width: 100%;
  }

  .el-tree-node__content {
    width: 100%;

    &:hover {
      .spanDir {
        width: 100%;
        color: #06a7ff;
      }
    }
  }
</style>
